<template>
	<div class="addSpecialist">
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>专家技术</el-breadcrumb-item>
				<el-breadcrumb-item>团队管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<!-- 新增专家 -->
			<div>
				<div class="menberConTitle flex" style="justify-content: space-between;background: none;margin-top: 0;">
					<div class="tableTitle">{{ editorId?'编辑':'新增' }}专家</div>
					<div></div>
				</div>
				<div class="yselectMenberBox flex">
					<div class="yselectMenber">{{ pageData.selectMenberName }}</div>
					<div class="yselectMenberBtn" v-if="!editorId" @click="dialogVisible = true">选择成员</div>
				</div>
			</div>
			<!-- 擅长领域 -->
			<div>
				<div class="menberConTitle flex" style="justify-content: space-between;padding: 9px 20px;">
					<div class="tableTitle">擅长领域</div>
					<div></div>
				</div>
				<div class="yselectMenberBox flex" style="flex-wrap: wrap;">
					<!-- 系统内置标签 -->
					<el-tag class="tagItem" v-for="(tag, index) in pageData.fieldRelation" :key="tag.id" size=" " closable @close="removeTerritory('1', index)">{{tag.fieldName}}</el-tag>
					<!-- 自定义标签 -->
					<el-tag class="tagItem" v-for="(item, index) in pageData.customizeFieldRelation" :key="item.fieldName" size=" " @close="removeTerritory('0', index)" closable>{{item.fieldName}}</el-tag>
					<el-button type="primary" class="tagItemBtn" size=" " plain @click="addTerritory">新增领域</el-button>
					<!-- <el-checkbox-group v-model="add.fieldRelations" @change="checkListSelectInternally">
						<el-checkbox class="checkboxItem" :label="item.id" v-for="(item,index) in add.fieldRelationList" :key="index">{{ item.fieldName }}</el-checkbox>
					</el-checkbox-group>
					<el-checkbox-group v-model="pageData.customizeFieldRelation" @change="checkListSelect">
						<el-checkbox class="checkboxItem" :label="item.fieldName" v-for="(item,index) in add.customList" :key="index"></el-checkbox>
						<el-button type="primary" plain :style="{'margin-left':add.customList.length > 0?'30px':'0px'}" @click="addTerritory">新增领域</el-button>
					</el-checkbox-group> -->
				</div>
			</div>
			<!-- 教育经历 -->
			<education v-if="isComponent"></education>
			<!-- 职称等级 -->
			<technical v-if="isComponent"></technical>
			<!-- 个人简介 -->
			<div>
				<div class="menberConTitle flex" style="justify-content: space-between;padding: 8px 20px;">
					<div class="tableTitle">个人简介</div>
				</div>
				<div class="tableDataBox flex">
					<el-input type="textarea" class="textarea" resize="none" placeholder="请简要的描述您获奖情况、擅长放向，主要业绩等" v-model="pageData.introduce"></el-input>
				</div>
			</div>
			<!-- 获奖成果 -->
			<palm v-if="isComponent"></palm>
			<!-- 培训经历 -->
			<cultivateundergo v-if="isComponent"></cultivateundergo>

			<!-- 社会职务 -->
			<society v-if="isComponent"></society>

			<!-- 主持在研项目 -->
			<research v-if="isComponent"></research>

			<!-- 代表文章专著 -->
			<articles v-if="isComponent"></articles>

		</div>
		<div class="bottomBtns">
			<el-button type="primary" round @click="goBack">返回</el-button>
			<el-button type="primary" round @click="submit">确认</el-button>
		</div>
		<!-- 新增专家 -->
		<el-dialog title="选择成员" :visible.sync="dialogVisible" width="800px">
			<el-table ref="multipleTable" :data="menbersList.items" tooltip-effect="dark" style="width: 100%">
				<!-- <el-table-column type="selection" width="55"> </el-table-column> -->
				<el-table-column prop="name" label="姓名"></el-table-column>
				<el-table-column prop="phone" label="电话"></el-table-column>
				<el-table-column prop="mainCompanyName" label="主团队">
					<template slot-scope="scope">
						{{ scope.row.mainCompanyName?scope.row.mainCompanyName:'暂无主团队' }}
					</template>
				</el-table-column>
				<el-table-column prop="departmentName" label="部门">
					<template slot-scope="scope">
						{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutiesName" label="职务">
					<template slot-scope="scope">
						{{ scope.row.dutiesName?scope.row.dutiesName:'暂无职务' }}
					</template>
				</el-table-column>
				<el-table-column prop="address" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="selectMenber(scope.row)">选择</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagina-tion :totalNum="menbersList.totalNum" @paginaClick="dialogTableDataPaginaClick"></pagina-tion>
			<!-- <span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmAdd">确 定</el-button>
			</span> -->
		</el-dialog>
		<!-- 添加擅长领域 -->
		<el-dialog title="添加擅长领域" :visible.sync="addPostDialog" width="60rem">
		  <div class="addTagDialog">
			  <el-form :model="addPostForm" class="demo-form-inline" label-width="10rem">
				  <el-form-item label="擅长领域" v-if="addPostForm.isPostId">
					  <div class="flex" style="justify-content: space-between;width: 290px;">
						  <el-select v-model="addPostForm.fieldRelation" placeholder="选择擅长领域" style="">
						    <el-option v-for="(item,index) in add.fieldRelationList" :label="item.fieldName" :value="item.id"></el-option>
						  </el-select>
						  <el-button icon="el-icon-edit" type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = false">自定义擅长领域</el-button>
					  </div>
				  </el-form-item>
			    <el-form-item label="自定义" v-else>
					<div class="flex" style="justify-content: space-between;width: 290px;">
						<el-input v-model="addPostForm.customFieldRelation" placeholder="自定义擅长领域"></el-input>
						<el-button type="text" style="margin-left: 10px;" @click="addPostForm.isPostId = true">取消自定义</el-button>
					</div>
			    </el-form-item>
			   
			  </el-form>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addPostDialog = false">取 消</el-button>
		    <el-button type="primary" @click="submitAddPost">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import add from './utils/index.js'
	import education from './components/education.vue'
	import technical from './components/technical.vue'
	import palm from './components/palm.vue'
	import cultivateundergo from './components/cultivateundergo.vue'
	import society from './components/society.vue'
	import research from './components/research.vue'
	import articles from './components/article.vue'
	export default {
		components: {
			education,
			technical,
			palm,
			cultivateundergo,
			society,
			research,
			articles
		},
		data() {
			return {
				companyId: '',
				// 新增专家选择成员弹窗
				dialogVisible: false,
				menbersList: '',
				selectMenberName: '请选择专家',
				// 防止页面刷新而丢失数据，存入缓存的专家名和擅长领域
				addspecialistData: {
					specialist: '', // 所选择的专家
					territory: '', // 自定义添加的领域数据
					checkList: []
				},
				// 获取js数据
				pageData: add.data,
				handlerTime: '',
				add: add,
				editorId: '',
				// 组件刷新数据
				isComponent: true,
				// 擅长领域弹窗
				addPostDialog: false,
				addPostForm: {
					isPostId: true,
					customFieldRelation: '' ,// 自定义
					fieldRelation: '' // 下拉框
				}
			};
		},
		mounted() {
			// let store = this.$store.state.user
			// this.userId = store.userInfo.id
			
			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId

			add.init.getTerritory()
			// this.setHandlerTime()
			this.editorId = this.$route.query.id
			
			if(this.editorId && sessionStorage.getItem('newExpert') == '0'){
				this.isComponent = false
				add.init.getExpert(this.editorId, (success)=>{
					if(success){
						this.pageData = add.data
										this.add = add
										this.isComponent = true
						sessionStorage.setItem('newExpert', '1')
					}
				})
				
			}
		},
		watch: {
			dialogVisible(newValue) {
				if (newValue) {
					this.getMenbersList(1)
				}
			},
			handlerTime(newValue) {
				this.pageData = add.data
				this.add = add
			},
			addPostDialog(newValue){
				this.addPostForm.customFieldRelation = ''
				this.addPostForm.fieldRelation = ''
				this.addPostForm.isPostId = true
			}
		},
		methods: {
			toAddPage(url) {
				// 跳转到新增页面
				this.$router.push(url)
			},
			submit() {
				// 新增专家
				let postUrl = ''
				if(!this.editorId){
					if (!this.pageData.userId) {
						this.$message.error('请选择专家成员')
						return
					}
					postUrl = this.$api.addNewExpert
				} else {
					postUrl = this.$api.updateAddExpert
				}
				
				this.$request.postJson(postUrl, this.pageData).then(res => {
					if (res.code == 200) {
						this.$message.success('操作成功')
						this.$router.push('/entrance/teammanagement/specialist')
					}
				})
			},








			checkListSelectInternally(e) {
				// 选取内置擅长领域
				// console.log(e)
				add.territory.internally(e)
				// console.log(this.pageData.fieldRelation)
				this.setHandlerTime()
			},
			addTerritory() {
				// 新增领域
				
				this.addPostDialog = true
				
				
				
				// this.$prompt('', '请输入领域名称', {
				// 	confirmButtonText: '确定',
				// 	cancelButtonText: '取消',
				// 	inputPattern: /\S/,
				// 	inputErrorMessage: '领域名称不能为空'
				// }).then(({
				// 	value
				// }) => {
				// 	let newValue = value.replace(/(^\s*)|(\s*$)/g, "")
				// 	if (newValue) {
				// 		let checkData = {
				// 			fieldName: newValue
				// 		}
				// 		add.territory.custom(checkData)
				// 		this.setHandlerTime()
				// 	}
				// })
			},
			// addPostDialogChange(e){
			// 	// 擅长领域弹窗选中数据
				
				
			// 	// console.log(this.addPostForm.fieldRelation)
			// },
			removeTerritory(type, index){
				// 删除领域
				// 1为删除系统内置领域，0为删除自定义领域
				add.territory.removeTerritory(type, index, (res)=>{
					if(res){
						this.$message.success('删除成功')
					} else {
						this.$message.error('删除失败')
					}
				})
				this.setHandlerTime()
			},
			submitAddPost(){
				// 确定添加擅长领域
				if(this.addPostForm.isPostId){
					// 选择内置
					if(!this.addPostForm.fieldRelation){
						this.$message.error('请选择擅长领域')
						return
					}
					add.fieldRelationList.filter(item=>{
						if(item.id === this.addPostForm.fieldRelation){
							let data = {
								id: item.id,
								fieldName: item.fieldName
							}
							add.territory.newInternally(data, (res)=>{
								if(!res){
									this.$message.error('不能重复添加相同领域')
								}
							})
						}
					})
				} else {
					// 自定义
					if(!this.addPostForm.customFieldRelation){
						this.$message.error('自定义名称不能为空')
						return
					}
					let newValue = this.addPostForm.customFieldRelation.replace(/(^\s*)|(\s*$)/g, "")
					// console.log(newValue)
					let checkData = {
								fieldName: newValue
							}
					// add.territory.custom(checkData)
					add.territory.newCustom(checkData, (res)=>{
						if(!res){
							this.$message.error('不能重复添加相同领域')
						}
					})
					this.setHandlerTime()
				}
				this.addPostDialog = false
			},
			checkListSelect() {
				// 选择领域
				this.setHandlerTime()
			},
			// 弹窗
			confirmAdd() {
				this.dialogVisible = false
			},
			getMenbersList(page = 1) {
				// 获取公司成员
				this.$request.postForm(this.$api.queryUserNotExpert, {
					companyId: this.companyId,
					page: page,
					pageSize: $globalData.pageSize
				}).then(res => {
					if (res.code == 200) {
						this.menbersList = res.data
					}
				})
			},
			dialogTableDataPaginaClick(val) {
				this.getMenbersList(val)
			},
			selectMenber(row) {
				// 选择成员
				add.selectMenber(row)
				this.setHandlerTime()
				this.dialogVisible = false
			},
			setHandlerTime() {
				this.handlerTime = new Date().getTime()
			},
			goBack() {
				if (this.handlerTime) {
					this.$confirm('当前页面未保存，确定要离开?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$router.back()
					})
				} else {
					this.$router.back()
				}

			}
		},
		beforeRouteEnter (to, from, next) {
		   let toPath = ['addeducation', 'addtechnical', 'addpalm', 'addcultivateundergo', 'addsociety', 'addresearch',
		   	'addarticle'
		   ]
		   // if(from.fullPath == '/'){
			  //  sessionStorage.setItem('newExpert', '0')
		   // } else {
			   let isToPath = from.path.split('/')[from.path.split('/').length - 1]
			   if (!toPath.includes(isToPath)) {
			   	sessionStorage.setItem('newExpert', '0')
			   } else {
				   sessionStorage.setItem('newExpert', '1')
			   }
		   // }
		   next()
		},
		beforeRouteLeave(to, from, next) {
			// 导航离开当前组件的对应路由调用
			let toPath = ['addeducation', 'addtechnical', 'addpalm', 'addcultivateundergo', 'addsociety', 'addresearch',
				'addarticle'
			]
			let isToPath = to.path.split('/')[to.path.split('/').length - 1]
			if (!toPath.includes(isToPath)) {
				add.init.clear()
				sessionStorage.removeItem('newExpert')
			}
			next()
		}
	};
</script>

<style scoped="scoped">
	.addSpecialist {}

	.breadcrumb {
		padding: 20px;
	}

	.selectMenbers,
	.tableNavBox,
	.yselectMenberBox {
		padding: 0 20px;
	}

	.tableDataBox {
		padding: 0;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		font-size: 16px;
		color: #333333;
		align-items: center;
		/* margin-bottom: 20px; */
		margin-top: 30px;
	}

	.yselectMenberBox {
		padding-top: 10px;
	}

	.yselectMenber {
		color: #333333;
		border: 1px solid #DFDFDF;
		width: 180px;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}

	.yselectMenberBtn {
		width: 120px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #23B14D;
		color: #FFFFFF;
		cursor: pointer;
	}

	.checkboxItem,.tagItem,.tagItemBtn{
		/* margin-bottom: 20px; */
		width: 115px;
		/* overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap; */
	}
	.tagItem{
		margin-right: 10px;
		/* width: 114px; */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 10px;
	}
	.tagItemBtn{
		/* width: 114px; */
		height: 32px;
		    line-height: 0;
	}
	.checkboxItem>>>.el-checkbox__input{
		margin-top: -8px;
	}
	.checkboxItem>>>.el-checkbox__label{
		width: 95px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.titleBtn {
		width: 80px;
	}

	.tableImages {
		width: 30px;
		height: 30px;
		border-radius: 5px;
		box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		cursor: pointer;
	}

	.textarea {
		width: 100%;
		margin-top: 20px;
	}

	.textarea>>>textarea {
		height: 120px;
	}



	.bottomBtns {
		margin-top: 50px;
		width: 100%;
		border-top: 1px solid #DCDCDC;
		padding: 30px 0;
		text-align: center;
	}

	.bottomBtns button {
		width: 100px;
	}
	.prohibit{
		background: #B3E19D;
		cursor: no-drop;
	}
</style>
